<gm:page title="IGIS" authenticate="false" onload="onLoad()">

  <style>
    body {
      font-family: Arial, sans serif;
      font-size: 12px;
    }
    v\:* {
      behavior:url(#default#VML);
    }
  </style>
  
  <script>
    var myMap;
    
    var layers = {
      "states": 
      {"url": "http://webpages.cs.luc.edu/~cramirez/usPop.kml",
       "name": "States"},
      "path": 
      {"url": "http://webpages.cs.luc.edu/~cramirez/TestPath1.kml",
       "name": "Path"},
      "polygon": 
      {"url" : "http://webpages.cs.luc.edu/~cramirez/TestPolygon1.kml",
       "name": "Polygon"},
      "london":
      {"url" : "http://www.geograph.org.uk/feed/recent.rss",
       "name" : "London"},
      "mart":
      {"url" : "http://webpages.cs.luc.edu/~cramirez/ChicagoMerchandiseMart.kml",
       "name" : "MMart"},
       "dinos":
      {"url" : "http://webpages.cs.luc.edu/~cramirez/DinosaurCollection.kml",
       "name" : "Dinos"},
       "hurtley":
      {"url" : "http://webpages.cs.luc.edu/~cramirez/FLWArthurHeurtley.kml",
       "name" : "Arthur"},
      "golf":
      {"url" : "http://webpages.cs.luc.edu/~cramirez/golf.kml",
       "name" : "Golf"}
    };    
    
    function onLoad() {
      myMap = google.mashups.getObjectById('myMap').getMap();
  
      for(var layer in layers) {
        addTR(layer, layers[layer].name);
      }
    }
    
    function addTR(id) {
      var layerTR = document.createElement("tr");

      var inputTD = document.createElement("td");
      var input = document.createElement("input");
      input.type = "checkbox";
      input.id = id;
      input.onclick = function () { toggleGeoXML(this.id, this.checked) };
      inputTD.appendChild(input);

      var nameTD = document.createElement("td");
      var nameA = document.createElement("a");
      nameA.href = layers[id].url;
      var name = document.createTextNode(layers[id].name);
      nameA.appendChild(name);
      nameTD.appendChild(nameA);

      layerTR.appendChild(inputTD);
      layerTR.appendChild(nameTD);
      document.getElementById("sidebarTBODY").appendChild(layerTR);
    }
    
    function toggleGeoXML(id, checked) {
      if (checked) {
        var geoXml = new GGeoXml(layers[id].url, function() {
          if (geoXml.loadedCorrectly()) {
            geoXml.gotoDefaultViewport(myMap);
            layers[id].geoxml = geoXml;
          }
        });
        layers[id].geoXml = geoXml;
        myMap.addOverlay(layers[id].geoXml);
      } else if (layers[id].geoXml) {
        myMap.removeOverlay(layers[id].geoXml);
      }
    }
    
    
    function refresh(){
      myMap = google.mashups.getObjectById('myMap').getMap();
      myMap.clearOverlays();
    }  
    </script>
  
  <div id="wrapper" style="padding-top:22px;">
    <h1>Interactive GIS</h1>
  <div id="sidebar" style="float:right; width:30%; padding:12px">
    <table id="sidebarTABLE">
      <tbody id="sidebarTBODY"></tbody> 
    </table>
    <br /><br />
    <gm:list id="myList" data="${app}/markers" template="myListTemplate">
      <gm:handleEvent src="myMap"/>
    </gm:list>
        
  </div>
  
  <div id="map" style="width:700px">
    <gm:map id="myMap" data="${myList}" control="large" 
    infotemplate="myMapDetailsTemplate" maptypes="true"
     create="true">
      <gm:handleEvent src="myList"/>
    </gm:map>
  </div>
  
  </div>
  
  <gm:template id="myMapDetailsTemplate">
    <table style="width:300px">
      <tr>
        <td colspan="2"><gm:text ref="atom:title"/></td>
      </tr>
      <tr>
        <td colspan="2"><gm:rating ref="gd:rating"/></td>
      </tr>
      <tr>
        <td colspan="2"><gm:textarea ref="atom:content"/></td>
      </tr>
      <tr>
        <td colspan="2"><gm:editButtons editonly="true" text="true"/></td>
      </tr>
    </table>
  </gm:template>

  <gm:template id="myListTemplate">
    <table class="blue-theme" style="width:100%">
      <thead>
        <tr>
          <td style="width:40px"></td>
          <td>Name</td>
          <td style="width:90px">Rating</td>
          <td style="width:45px"></td>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <td colspan="2"><gm:pager/></td>
          <td colspan="2" align="right"><gm:create label="Add"/></td>
        </tr>
      </tfoot>
      <tbody repeat="true">
        <tr>
          <td align="center"><gm:toggle/></td>
          <td><gm:text ref="atom:title" hint="Enter title."/></td>
          <td><gm:rating ref="gd:rating"/></td>
          <td><gm:editButtons/></td>
        </tr>     
        <tr class="gm-toggled">
          <td colspan="4">
            <gm:textarea ref="atom:content"/>
            <p>
              <gm:text ref="georss:where/gml:Point/gml:pos" readonly="true"/>
            </p>
          </td>
        </tr>
      </tbody>
    </table>
  </gm:template>
</gm:page>